<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>导航路线</title>
<link rel="stylesheet" href="css/search.css">
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2&ak=GWKMwlzTUGmMqnKCp5rxq6nRsDmefBCW"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=GWKMwlzTUGmMqnKCp5rxq6nRsDmefBCW">//密钥
</script>
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=GWKMwlzTUGmMqnKCp5rxq6nRsDmefBCW"></script>
<style>
  html{height:100%}  
  body{
    font-size:14px;
    font-family: "宋体";
    background-color: rgb(255, 255, 255);
    background-image: url(./images/b2.png);
            /* 背景图垂直、水平均居中 */
            background-position: center center;
            /* 背景图不平铺 */
            background-repeat: no-repeat;
            /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
            background-attachment: fixed;
            /* 让背景图基于容器大小伸缩 */
            background-size: cover;
            /* 设置背景颜色，背景图加载过程中会显示背景色 */
            background-color: #464646;
  }
  h5{line-height:3em;padding:0;margin:0;font-size:20px;font-family: "宋体";}
  a{color:#f271e9;}
  a:hover{color:#99AA66;}
  .txt{border:1px solid rgb(238, 167, 251);background:none;padding:1px;width: 350px;height: 35px;margin: auto; font-size: 20px;font-family: "宋体";}
  .f-l{float:right;}
  .t-c{text-align:center;}
  .clear{clear:both;}
  .hidden{display:none;}
  .searchbox{border:0px solid #e5ecf9;height:40px;line-height:40px;padding:0 20px;margin:70px 0 0 50px;font-family: "宋体";margin-left: 200px;}
  .mainbox{margin:30px 0 0;height: 500px;width: 100%;}
  .boxmap{width:1400px;height:700px;border:1px solid gray;float:left;}
  .boxpanel{width:360px;float:left;margin:0 0 0 10px;border:1px solid gray;padding:0 10px 10px;}
  #startPanel,#endPanel{border:1px solid #FA8722;font-size:12px;}
  #startPanel div,#endPanel div{padding:5px;}
  #startPanel p,#endPanel p{margin:0;paddin:0;line-height:1.2em;}
  #drivingPanel{border:1px solid #6688EE;}
</style>
</head>
<body>
  <div id="head">
    <b>
      <div class="separt1"><div style="height: 10px;"></div><span class="logo">文化遗址系统</span></div>
      <div class="separt"><div style="height: 10px;"></div><a class="change" href="index.html"><span>主页</span></a></div>
      <div class="separt"><div style="height: 10px;"></div><a class="change" href="luxian.html"><span>路线</span></a></div>
      <div class="separt"><div style="height: 10px;"></div><a class="change" href="collect.html"><span>去收藏</span></a></div>
      <div class="separt"><div style="height: 10px;"></div><a class="change" href="box.html"><span>收藏夹</span></a></div>
  </b>
    </div>
<div>
    <div class="searchbox">
        从&nbsp;<input class="txt" type="text" value="" placeholder="起点" id="startInput"/>&nbsp;到&nbsp;<input class="txt" type="text" placeholder="终点" value="" id="endInput"/>&nbsp;&nbsp;<input type="button" style="font-size: 20px;font-family: '宋体';" value="行驶" onclick="mDriving()"/>
    </div>
</div>
<div class="clear"></div>
<div class="mainbox">
    <div class="boxmap" id="container"></div>
    <div class="boxpanel hidden" id="box">
        <h5>起点选择&nbsp;<a href="#" onclick="document.getElementById('startPanel').style.display='block';">(点击展开)</a></h5>
        <div id="startPanel"></div>
        <h5>终点选择&nbsp;<a href="#" onclick="document.getElementById('endPanel').style.display='block';">(点击展开)</a></h5>
        <div id="endPanel"></div>
        <h5>驾车导航</h5>
        <div id="drivingPanel"></div>
    </div>
</div>
</body>
</html>
<script type="text/javascript">
var map =new BMap.Map("container");            // 创建Map实例
var point =new BMap.Point(116.404, 39.915);    // 创建点坐标
map.centerAndZoom(point,15);                     // 初始化地图,设置中心点坐标和地图级别。

var startInfowin =new BMap.InfoWindow("<p class='t-c'><input value='选为起点' type='button' onclick='startDeter();' /></p>");
var endInfowin =new BMap.InfoWindow("<p class='t-c'><input value='选为终点' type='button' onclick='endDeter();' /></p>");

var startResults =null;
var endResults =null;

var startPoint;
var endPoint;

//var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true,panel:drivingPanel}});
var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true, panel:'drivingPanel'}});



var startOption = {
  onSearchComplete: function(results){
    // 判断状态是否正确
if (startSearch.getStatus() == BMAP_STATUS_SUCCESS){
      startResults = results;
      var s = [];
      for (var i =0; i < results.getCurrentNumPois(); i ++){
        s.push("<div><p><a onmouseover='map.openInfoWindow(startInfowin,startResults.getPoi("+ i +").point);' href='#'>");
        s.push(results.getPoi(i).title);
        s.push("</a></p><p>");
        s.push(results.getPoi(i).address);
        s.push("</p></div>");
      }
      document.getElementById("startPanel").innerHTML = s.join("");
    }else{startResults =null;}
  }
};
var endOption = {
  onSearchComplete: function(results){
    // 判断状态是否正确
if (endSearch.getStatus() == BMAP_STATUS_SUCCESS){
      endResults = results;
      var s = [];
      for (var i =0; i < results.getCurrentNumPois(); i ++){
        s.push("<div><p><a href='#' onmouseover='map.openInfoWindow(endInfowin,endResults.getPoi("+ i +").point);'>");
        s.push(results.getPoi(i).title);
        s.push("</a></p><p>");
        s.push(results.getPoi(i).address);
        s.push("</p></div>");
      }
      document.getElementById("endPanel").innerHTML = s.join("");
    }else{endResults =null;}
  }
};
//创建2个搜索实例
var startSearch =new BMap.LocalSearch(map,startOption);
var endSearch =new BMap.LocalSearch(map,endOption);

function mDriving(){
    var startPlace = document.getElementById("startInput").value;
    var endPlace = document.getElementById("endInput").value;
    startSearch.search(startPlace);
    endSearch.search(endPlace);
    document.getElementById("box").style.display="block";
}

function startDeter(){
    map.clearOverlays();
    startPoint = startInfowin.getPosition();
    var marker =new BMap.Marker(startPoint);
    map.addOverlay(marker);
    document.getElementById("startPanel").style.display="none";
}
function endDeter(){    
    if(startPoint==null){alert("请先选择起点！");}
    else{
        endPoint = endInfowin.getPosition();        
        driving.search(startPoint,endPoint);
        document.getElementById("endPanel").style.display="none";
    }
}
</script>